<template>
  <div>
    <div class="pageCard">
      <a-form layout="inline" :model="formSearch" style="align-items: center">
        <a-form-item>
          <a-input
            allowClear
            v-model:value="formSearch.name"
            placeholder="请输入耗材名称"
          >
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="getSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="toresetFields">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="background: #fff">
      <a-table
        style="padding: 0 20px"
        :pagination="pagination"
        :columns="columns"
        :rowKey="(record) => record.id"
        :data-source="list"
        :scroll="{ x: 1500 }"
      >
        <template #operation="{ record }">
          <div style="display: flex; align-items: center">
            <div
              style="cursor: pointer; padding: 0 4px"
              class="color_blue"
              @click="lookHandle(record)"
            >
              查看
            </div>
            <div
              style="cursor: pointer; padding: 0 4px"
              class="color_blue"
              @click="handleViewRecord(record)"
            >
              出入库记录
            </div>
            
            <div
              style="cursor: pointer; padding: 0 4px"
              class="color_blue"
              @click="editHandle(record)"
            >
              编辑
            </div>
         
            <div
              style="cursor: pointer; padding: 0 4px"
              class="color_red"
              @click="delHandle(record)"
            >
              删除
            </div>
          </div>
        </template>
        <template #title>
          <div class="ANTTable_header">
            <div style="font-weight: bold">耗材列表</div>
            <div>
            
             
              <a-button @click="handleImport" style="margin: 0 10px"
                >导入</a-button
              >
              <a-button type="primary" @click="addHandle()"
                >添加耗材</a-button
              >
            </div>
          </div>
        </template>
      </a-table>
    </div>

    <a-modal
      width="40%"
      v-model:visible="visible"
      :title="handleTitle"
      @ok="handleOk"
      @cancel="handleCancle"
      ok-text="确认"
      cancel-text="取消"
    >
      <child
        v-if="visible"
        :handleType="handleType"
        :handleRow="handleRow.data"
        ref="child"
        @finish="finishHandle"
      ></child>
    </a-modal>

 <!-- 出入库弹窗 -->
  <a-modal
      width="60%"
      v-model:visible="handleViewDia"
      title="出入库记录"
      :footer="null"
      ok-text="确认"
      cancel-text="取消"
    >
      <a-form
      ref="formRef"
      layout="vertical"
      :model="handleRow.data"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="code"
        label="耗材编号"
        name="code"
      >
        <a-input disabled v-model:value="handleRow.data.code" />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="name"
        label="耗材名称"
        name="name"
      >
        <a-input disabled v-model:value="handleRow.data.name"  />
      </a-form-item>
      </a-form>
       <a-table
        style="padding: 0 20px"
       :pagination="false"
        :columns="handleViewcolumns"
        :rowKey="(record) => record.id"
        :data-source="handleViewTable"
        :scroll="{ x: 1500 }"
      >
        <template #type="{ record }">
          {{record.type == 'out'?"出库":'入库'}}
        </template>
       
       </a-table>
    </a-modal>
      <a-modal
      width="40%"
      v-model:visible="ImportFilevisible"
      title="导入耗材"
      @ok="ImporthandleOk"
      ok-text="确认上传"
      cancel-text="取消"
    >
      <a-upload-dragger   accept="application/vnd.ms-excel" v-model:fileList="fileList" name="file" :before-upload="beforeUpload">
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <a-button @click.stop="ImporthandleCancle()">下载模板</a-button>
        <p class="ant-upload-text">第一步:下载Excel耗材模板;</p>
        <p class="ant-upload-text">
          第二步:使用模板编辑耗材,点击"选择文件"选择您编辑好的Excel文档;
        </p>
        <p class="ant-upload-text">第三步:点击"确认上传"完成耗材导入;</p>
      </a-upload-dragger>
    </a-modal>
  
  </div>
</template>
<script>
import child from "./components/child.vue";
import { createVNode, onMounted, reactive, ref, toRefs, watch } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
import { Modal, message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
import * as consumableApi from "@/api/consumable.js";
const handleViewcolumns = [{
    title: "操作人",
    dataIndex: "createUser",
  },
  {
    title: "操作",
    dataIndex: "type",
    slots: { customRender: "type" },
  },
  {
    title: "操作时间",
    dataIndex: "createTime",
  },
  {
    title: "领用人",
    dataIndex: "userStaffName",
  },
  {
    title: "使用科室",
    dataIndex: "hospitalDepartName",
  },
  {
    title: "原库存数",
    dataIndex: "beforeNum",
  },
  {
    title: "变化量",
    dataIndex: "changeNum",
  },
    {
    title: "显存库数",
    dataIndex: "afterNum",
  },
  

  ]
// 表格Column
const columns = [
  {
    title: "耗材编号",
    dataIndex: "code",
      width: 180,
  },
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "规格",
    dataIndex: "format",
  },
  {
    title: "单价",
    dataIndex: "price",
  },
    {
    title: "厂家",
    dataIndex: "factory",
  },
    {
    title: "品牌",
    dataIndex: "brand",
  },
    {
    title: "库存数",
    dataIndex: "reserve",
  },
   {
    title: "单位",
    dataIndex: "unit",
  },
   {
    title: "最高库存",
    dataIndex: "reserveMax",
  },
   {
    title: "最低库存",
    dataIndex: "reserveMin",
  },
  
  {
    title: "操作",
    dataIndex: "operation",
    width: 250,
    slots: { customRender: "operation" },
  },
];
const useForm = Form.useForm;
export default {
  components: {
    child,
    ExclamationCircleOutlined,
  },
  setup(props, { emit }) {
    const formSearch = reactive({
      // 耗材名称
      name: "",
     
    });
    const beforeUpload = ()=>{
      return false
    }
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {});
    const tableData = reactive({ list: [], total: 0 });
    const { resetFields } = useForm(formSearch);
    const pageSize = ref(10);
    const pageIndex = ref(1);
    // 查询
    const getSearch = () => {
      console.log(333);
      pageIndex.value = 1;
      pagination.current = 1;
      handleGetDataList();
    };

    

    const pagination = reactive({
      total: 0,
      current: pageIndex.value,
      pageSize: pageSize.value, // 默认每页显示数量
      showSizeChanger: true, // 显示可改变每页数量
      pageSizeOptions: [ "10", "20", "30", "40"], // 每页数量选项
      showTotal: (total) => `总数 ${total}条数据`, // 显示总数
      onChange: (page, size) => {
        onPageChange(page, size);
      }, // 改变每页数量时更新显示
      onShowSizeChange: (current, size) => {
        onSizeChange(current, size);
      },
    });
    // 分页
    const onSizeChange = (current, size) => {
      pageIndex.value = 1;
      pagination.current = 1;
      pageSize.value = size;
      handleGetDataList();
    };
    const onPageChange = (current, size) => {
      pageIndex.value = current;
      pagination.current = current;
      handleGetDataList();
    };
     // 导入功能
    const ImportFilevisible = ref(false);
    const fileList = ref([]);

    const ImporthandleOk = () => {
      console.log(fileList.value[0].originFileObj);
      let formDate = new FormData();
      formDate.append("file", fileList.value[0].originFileObj);
      consumableApi.importList(formDate).then((res) => {
        if (res && res.success) {
          message.success("导入成功");
          ImportFilevisible.value = false;
          getSearch();
        }
      });
    };

    const ImporthandleCancle = () => {
      consumableApi.downloadTemplate().then((res) => {
        const link = document.createElement("a");
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel", // "application/zip",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = "耗材"; // 下载后文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });

      return false;
    };
      //导入
    const handleImport = () => {
      ImportFilevisible.value = true;
    };
    // 获取表格
    const handleGetDataList = async () => {
      tableData.list = [];
      let params = {
        ...formSearch,
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
      };
      consumableApi.materialBaseList(params).then((res) => {
        if (res && res.success) {
        
          tableData.list = res.data;
          pagination.total = res.total;
        }
      });
    };


    // 重置表格
    const toresetFields = () => {
      resetFields();
      getSearch();
    };
    // 监听表格
    watch(
      () => formSearch,
      (curAge, preAge) => {
        getSearch();
      },
      { deep: true }
    );
   
    //  新增功能
    const visible = ref(false);
    const handleType = ref("add");
    const handleTitle = ref("新增耗材");
    const handleRow = reactive({ data: {} });
    const addHandle = () => {
      visible.value = true;
      handleType.value = "add";
      handleTitle.value =  "新增耗材";
    };
    const lookHandle = (data) => {
      visible.value = true;
      handleType.value = "look";
      handleTitle.value = "查看耗材";
      handleRow.data = {
        ...data,
      };
    };
    const editHandle = (data) => {
      visible.value = true;
      handleType.value = "edit";
      handleTitle.value = "编辑耗材";
      handleRow.data = {
        ...data,
      };
    };
    const handleViewDia = ref(false)
    const handleViewTable = ref([])
    // 出入库记录
    const handleViewRecord = (data)=>{
      handleViewDia.value = true
       handleRow.data = {
        ...data,
      };
       consumableApi.getMaterialRecordList(data.id).then((res) => {
        if (res && res.success) {
          handleViewTable.value = res.data;
        }
      });
      
    }
    // 删除
    const delHandle = (data) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode("div", { style: "color:red;" }, "确认删除该耗材"),
        onOk() {
          consumableApi.materialBaseRemove(data.id).then((res) => {
            if (res && res.success) {
              message.success("删除成功");
              getSearch();
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test",
      });
    };
    
    // 完成操作
    const finishHandle = () => {
      visible.value = false;
      getSearch();
    };

    const child = ref(null);
    const handleOk = () => {
      child.value.handleSave();
    };

    const handleCancle = () => {
      child.value.resetForm();
    };

    
    onMounted(() => {
      handleGetDataList();
     
    });
    return {
      child, //子组件
      formSearch,
      toresetFields,
      userInfo,
      columns,
      handleViewcolumns,
      ...toRefs(tableData),
      handleGetDataList,
      getSearch,

      visible,
      handleTitle,
      // 新增
      addHandle,
      // 查看
      lookHandle,
      // 编辑
      editHandle,
      // 删除
      delHandle,
      handleType,
      handleOk,
      handleCancle,
      finishHandle,
      // 出入库记录
      handleViewRecord,

      // 出入库记录弹窗
      handleViewDia,
      handleViewTable,

      // 导入
      beforeUpload,
        ImportFilevisible,
      fileList,
      ImporthandleOk,
      ImporthandleCancle,
      handleImport,

      
      handleRow,
      

      
      pagination,

    };
  },
};
</script>